<div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus" style="padding: 0;">
  <span class="ui-grid-header-cell-label">
    <span class="ui-grid-header-cell-title">{{ header.displayName || 'Loading'}}<md-tooltip>{{ header.headerTooltip }}</md-tooltip></span>
    <span ng-if="header.dataType" style="display: block;">{{ header.dataType || ''}}</span>
  </span>
  <span>
    <i ng-class="{'ui-grid-icon-up-dir': header.sort.direction == 'asc', 'ui-grid-icon-down-dir': header.sort.direction == 'desc', 'ui-grid-icon-blank': header.sort.direction == null}"></i>
  </span>
</div>
<span ng-if="domainType" class="kylo-visual-query-table-domain-type">
  <ng-md-icon icon="{{ domainType.icon }}" ng-style="{'fill': domainType.iconColor}"></ng-md-icon>
  <md-tooltip>{{ domainType.title }}</md-tooltip>
</span>
<md-menu class="ui-grid-column-menu-button" md-position-mode="target-right target" md-offset="0 42">
  <md-button ng-click="$mdOpenMenu()" class="md-icon-button" style="line-height: 24px;">
    <i class="ui-grid-icon-angle-down">&nbsp;</i>
  </md-button>
  <md-menu-content class="visual-query-column-menu">
    <md-menu-item>
      <md-button ng-click="header.delegate.showAnalyzeColumn(header, table)">
        <i class="material-icons">assessment</i>&nbsp;</i> {{"views.query-table-header.analyze" | translate}}
      </md-button>
    </md-menu-item>
    <md-menu-item ng-if="header.sort.direction != 'asc'">
      <md-button ng-click="header.delegate.sortColumn('asc', header, table)">
        <i class="ui-grid-icon-sort-alt-up">&nbsp;</i> {{"views.query-table-header.sort-ascending" | translate}}
      </md-button>
    </md-menu-item>
    <md-menu-item ng-if="header.sort.direction != 'desc'">
      <md-button ng-click="header.delegate.sortColumn('desc', header, table)">
        <i class="ui-grid-icon-sort-alt-down">&nbsp;</i> {{"views.query-table-header.sort-descending" | translate}}
      </md-button>
    </md-menu-item>
    <!--
    <md-menu-item ng-if="header.sort.direction != null">
      <md-button ng-click="header.delegate.removeSort(header, table)">
        <i class="ui-grid-icon-cancel">&nbsp;</i> {{"views.query-table-header.remove-sort" | translate}}
      </md-button>
    </md-menu-item>
    -->
    <md-menu-item>
      <md-button ng-click="header.delegate.hideColumn(header, table)">
        <i class="material-icons">remove_circle</i> {{"views.query-table-header.hide-column" | translate}}
      </md-button>
    </md-menu-item>
    <md-menu-item>
      <md-button ng-click="header.delegate.cloneColumn(header, table)">
        <i class="material-icons">content_copy</i> {{"views.query-table-header.clone-column" | translate}}
      </md-button>
    </md-menu-item>
    <md-menu-item>
      <md-button ng-click="header.delegate.renameColumn(header, table)">
        <i class="material-icons">mode_edit</i> {{"views.query-table-header.rename-column" | translate}}
      </md-button>
    </md-menu-item>
    <md-menu-item ng-if="availableCasts.length > 0">
      <md-menu>
        <md-button ng-click="$mdOpenMenu()">
          <i class="material-icons">font_download</i> Data Type
        </md-button>
        <md-menu-content class="visual-query-column-menu">
          <md-menu-item ng-repeat="type in availableCasts">
            <md-button ng-click="header.delegate.castTo(type)">
              <i class="material-icons" ng-style="{'fill':type.iconColor}">{{type.icon}}</i>
              {{type.name}}
            </md-button>
          </md-menu-item>
        </md-menu-content>
      </md-menu>
    </md-menu-item>
    <md-menu-item ng-if="availableDomainTypes != null && availableDomainTypes.length > 0">
      <md-menu>
        <md-button ng-click="$mdOpenMenu()">
          <i class="material-icons">local_offer</i> Domain Type
        </md-button>
        <md-menu-content class="visual-query-column-menu">
          <md-menu-item>
            <md-button ng-click="header.delegate.setDomainType(header, null)"><em>None</em></md-button>
          </md-menu-item>
          <md-menu-item ng-repeat="domainType in availableDomainTypes">
            <md-button ng-click="header.delegate.setDomainType(header, domainType.id)">
              <i class="material-icons" ng-style="{'fill':domainType.iconColor}">{{domainType.icon}}</i>
              {{domainType.title}}
            </md-button>
          </md-menu-item>
        </md-menu-content>
      </md-menu>
    </md-menu-item>
    <md-menu-item ng-if="header.delegate.filters.length !== 0">
      <md-menu>
        <md-button ng-click="$mdOpenMenu()">
          <i class="material-icons">filter_list</i> {{"views.query-table-header.filter" | translate}}
        </md-button>
        <md-menu-content class="visual-query-column-menu visual-query-filter-menu">
          <md-menu-item ng-repeat="filter in header.delegate.filters">
            <i class="material-icons" ng-class="{'custom-icon': (filter.icon.length === 1)}">{{ filter.icon }}</i>
              <md-input-container md-no-float>
                <input placeholder="{{ filter.label }}" type="text" ng-model="filter.term" ng-change="header.delegate.validateFilter(header,filter, table)" >
              </md-input-container>
          </md-menu-item>
          <md-button class="md-raised" ng-click="header.delegate.applyFilters(header,header.delegate.filters, table)">
          {{"views.query-table-header.filter-apply" | translate}}
          </md-button>
        </md-menu-content>
      </md-menu>
    </md-menu-item>
    <md-menu-item ng-if="header.delegate.transforms.length !== 0">
      <md-menu>
        <md-button ng-click="$mdOpenMenu()">
          <i class="material-icons">transform</i> {{"views.query-table-header.transform" | translate}}
        </md-button>
        <md-menu-content class="visual-query-column-menu">
          <md-menu-item ng-repeat="transform in header.delegate.transforms">
            <md-button ng-click="header.delegate.transformColumn(transform, header, table)">
              <i class="material-icons" ng-class="{'custom-icon': (transform.icon.length === 1)}">{{ transform.icon }}</i> {{ transform.name }}
            </md-button>
          </md-menu-item>
        </md-menu-content>
      </md-menu>
    </md-menu-item>
  </md-menu-content>
</md-menu>
